import React, { useState, useEffect, FC, useRef } from 'react';
import { Modal, Button } from 'antd-mobile-v2';
import styles from './index.less';
import { connect } from 'react-redux';
import { ConnectProps } from 'typings/connect';
import _ from 'lodash';

// import SearchInput from '@/components/SearchInput';

interface SelectEventModal extends ConnectProps {
  closeModalCallBack?: () => void;
  submitCallBack: (item: any) => void;
}

// 表单展示数据 属性显示
const SelectEventModal: FC<SelectEventModal> = (props) => {
  const [keyword, setKeyword] = useState<string>();
  const [tableData, setTableData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [countNum, setCountNum] = useState(0);

  const [currentSelect, setCurrentSelect] = useState<any>({});
  useEffect(() => {
    requestData();
  }, [currentPage]);

  const requestData = async () => {
    const payload = {
      pageNum: currentPage,
      pageSize: 8
    };
    if (props.dispatch) {
      const res = await props.dispatch({
        type: 'laberDeclare/getAllowRucMatterList',
        payload
      });
      const {
        data: { rows, total }
      } = res;
      setTableData(rows);
      setCountNum(total);
    }
  };
  // // 暴露接口给外边调用
  // useImperativeHandle(props.toOutRef, () => ({
  //   save,
  //   validate,
  // }));

  const search = (val?: string) => {
    if (props.dispatch) {
    }
  };

  const saveKeyword = (val?: string) => {
    setKeyword(val);
  };

  // 响应关闭通知
  const handleCancel = async () => {
    // 通知父组件 更新页面表格数据

    props.closeModalCallBack && props.closeModalCallBack();
  };

  const clickSubmit = () => {
    console.log('submit-modal');
    console.log(props);

    props.submitCallBack && props.submitCallBack(currentSelect);
  };

  // column
  const columns = [
    {
      title: '序号',
      key: 'index',
      width: 70,
      render: (text: any, record: any, index: number) => `${index + 1}`
    },
    {
      title: '事项名称',
      dataIndex: 'matterName',
      key: 'matterName',
      width: 150
    },
    {
      title: '经办人',
      dataIndex: 'managerName',
      key: 'managerName',
      width: 140
    },
    {
      title: '事项余额',
      dataIndex: 'matterTotal',
      key: 'matterTotal',
      width: 140
    }
  ];

  const renderFooter = () => {
    return (
      currentSelect?.matterName && (
        <span style={{ position: 'relative', top: -55 }}>
          已选择：{currentSelect.matterName}
        </span>
      )
    );
  };
  return (
    <Modal
      className={styles.selectModal}
      // width={514}
      bodyStyle={{ height: '600px' }}
      // centered
      title={'选择事项'}
      visible
    // onCancel={handleCancel}
    // footer={
    //   <div className={styles.customFooter}>
    //     <Button
    //       type="ghost"
    //       onClick={() => {
    //         handleCancel();
    //       }}
    //     >
    //       取消
    //     </Button>
    //     <Button
    //       type="primary"
    //       onClick={() => {
    //         clickSubmit();
    //       }}
    //     >
    //       确定
    //     </Button>
    //   </div>
    // }
    >
      <div className={styles.searchWrap}>
        {/* <SearchInput
          value={keyword}
          onSearch={search}
          onChange={saveKeyword}
          placeholder="请输入项目编号/项目名称/负责人/部门"
          style={{ width: 360, paddingRight: 10 }}
        /> */}
        <Button
          type="primary"
          onClick={() => {
            clickSubmit();
          }}
        >
          确定
        </Button>
      </div>

      {/* <Table
        className={styles.list + ' module-body'}
        rowKey={(text: { id: string }) => text?.id}
        columns={columns}
        dataSource={tableData} // 未选择任何显示字段 设为空显示暂无数据
        pagination={{
          simple: true,
          current: currentPage,
          total: countNum,
          pageSize: 8,
          showSizeChanger: true,
          onChange: (page: number, pageSize?: number) => {
            setCurrentPage(page);
          }
        }}
        onRow={(record) => {
          return {
            onClick: (event) => {
              setCurrentSelect(record);
            } // 点击行
          };
        }}
        rowClassName={(record) =>
          record?.id === currentSelect?.id ? styles.selectedRow : ''
        }
      /> */}
      {renderFooter()}

      {/* {props.loading ? (
          <Spin spinning={true}>
            <div style={{ height: '100%' }}></div>
          </Spin>
        ) : null} */}
    </Modal>
  );
};

export default connect()(SelectEventModal);
